<template>
  <div class="home">
    <el-row type="flex" justify="center">
      <el-col :xs="24" :sm="20" :md="16" :lg="14" :xl="12">
        <div class="welcome-container">
          <img alt="Vue logo" src="../assets/logo.png" />
          <h1>{{ $t("home.welcome") }}</h1>
          <p>{{ $t("home.description") }}</p>
          <el-divider></el-divider>
          <div class="feature-list">
            <h2>项目特性</h2>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-card shadow="hover">
                  <div slot="header">
                    <i class="el-icon-s-promotion"></i> 路由
                  </div>
                  <div class="feature-content">
                    History模式路由<br />
                    路由懒加载<br />
                    路由守卫
                  </div>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card shadow="hover">
                  <div slot="header">
                    <i class="el-icon-s-data"></i> 状态管理
                  </div>
                  <div class="feature-content">
                    Vuex模块化<br />
                    数据持久化<br />
                    权限控制
                  </div>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card shadow="hover">
                  <div slot="header"><i class="el-icon-s-tools"></i> 工具</div>
                  <div class="feature-content">
                    国际化支持<br />
                    Axios拦截器<br />
                    工具函数库
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
          <div class="action-buttons mt-10">
            <el-button type="primary" @click="changeLanguage">
              {{
                currentLanguage === "zh-CN" ? "Switch to English" : "切换到中文"
              }}
            </el-button>
            <el-button @click="$router.push('/about')">{{
              $t("about.title")
            }}</el-button>
            <el-button
              @click="
                $router.push(
                  '/datacenter?aid=3&platform=h5&session_id=8ea81e4f12c03211867268449efbaa90'
                )
              "
              >测试</el-button
            >
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Home",
  computed: {
    currentLanguage() {
      return this.$store.getters["settings/language"];
    },
  },
  methods: {
    changeLanguage() {
      const newLang = this.currentLanguage === "zh-CN" ? "en" : "zh-CN";
      this.$store.dispatch("settings/setLanguage", newLang);
      this.$i18n.locale = newLang;
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  padding: 20px;

  .welcome-container {
    text-align: center;
    padding: 20px;

    img {
      max-width: 200px;
    }

    h1 {
      margin-top: 20px;
      font-size: 28px;
      color: $primary-color;
    }

    p {
      color: $text-color-regular;
      margin-bottom: 30px;
    }
  }

  .feature-list {
    margin-top: 30px;
    margin-bottom: 30px;

    h2 {
      margin-bottom: 20px;
      font-size: 22px;
    }

    .feature-content {
      min-height: 100px;
      line-height: 1.8;
    }

    .el-card {
      margin-bottom: 20px;

      .el-card__header {
        font-weight: bold;

        i {
          margin-right: 5px;
          color: $primary-color;
        }
      }
    }
  }

  .action-buttons {
    margin-top: 20px;
  }
}

@media (max-width: $screen-sm) {
  .home {
    .feature-list {
      .el-col {
        width: 100%;
      }
    }
  }
}
</style>
